<template>
	<d2-container 
		v-loading="isLoading" 
		element-loading-text="拼命加载中..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)" 
    :filename="filename" type="card">
    <template slot="header">
    	{{title}}
    	<el-button type="danger" size='mini' icon="el-icon-delete" style='float: right; margin-left: 10px;' :disabled='isLoading' @click='centerDialogVisible = true'>删除快照</el-button>
    	<el-button type="primary" size='mini' icon="el-icon-edit" style='float: right;' :loading='isLoading' @click='dialogFormVisible = true'>修改快照</el-button>
    </template>
		<div id="snapshotTopo" class="snapshotTopo"></div>
		<el-dialog title="修改快照" width="30%" :visible.sync="dialogFormVisible">
		  <el-form :model="position">
		    <el-form-item label="快照描述: " label-width="100px">
		      <el-input v-model="position.description" autocomplete="off"></el-input>
		    </el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		  	<el-button @click="dialogFormVisible = false">取 消</el-button>
		    <el-button type="primary" @click="editPosition(position)">确 定</el-button>
		  </div>
		</el-dialog>
		<el-dialog title="提示" :visible.sync="centerDialogVisible" width="20%" center>
		  <span>确定删除<{{position.description}}>快照嘛?</span>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="centerDialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="removePosition(position)">确 定</el-button>
		  </span>
		</el-dialog>
  </d2-container>
</template>

<script>
	import { getPositionModel, topoDiscoverMapper } from '@/api/mapper'
	import base from './mixins/index'
	export default {
		name: 'snapshot',
		mixins: [
    	base
  	],
  	computed: {
	    title: function () {
	      return this.position.description + ' - ' + this.position.time
	    }
	  },
		data() {
			return {
				filename: __filename,
				position: {
					id: null,
					time: '',
					description: ''
				}
			}
		},
	  watch: {
	    '$route.params.id': {
	      handler (val) {
	      	if (val != undefined && this.position.id != val) {
						this.position.id = val
	        	this.showPositionModel()
	      	}
	      },
	      immediate: true
	    }
	  },
		methods: {
			/**
			 * [topoDiscoverMapper 根据快照查询基础数据]
			 * @param  {[type]} position [快照对象]
			 * @return {[type]}          [画图数据]
			 */
			topoDiscoverMapper(position){
				this.openSystemIds = []
				if(position.openedSystemId !== '') {
					this.openSystemIds = position.openedSystemId.split(',')
				}
				topoDiscoverMapper({
					openingSystemId: position.openedSystemId,
					modelId: position.id
				})
				.then(res => {
					this.drawTopo(res, 'snapshotTopo')
				})
			},
			/**
			 * [showPositionModel 根据id传值获取快照对象]
			 * @return {[type]} [获取快照数据]
			 */
			showPositionModel() {
				this.isLoading = true
				getPositionModel().then(res => {
					res.forEach(position => {
						if (position.id == this.position.id) {
							this.position = position
							this.topoDiscoverMapper(position)
						}
					})
				})
			}
		},
		mounted() {
			this.position.id = this.$route.params.id
			this.showPositionModel()
		}
	}
</script>

<style scoped lang="less">
	.snapshotTopo {
		width: 100%;
		height: 1000px;
	}
	.container-component {
		/deep/ .d2-container-card__body-card {
			margin-bottom: 0 !important;
			padding: 0 !important;
		}
	}
</style>
